﻿<script>
    $(document).ready(function () {
        $('#dataTable').dataTable({
            "bProcessing": true,
            "sAjaxSource": '/api/category',
            "sAjaxDataProp": "",
            "aoColumnDefs": [
                 { "aTargets": [0], "mData": null, "sTitle": "", "sWidth": "10px",
                     "fnRender": function (o, val) {
                         return "<a href='#' onclick='expand(this," + o.aData.ID + ");return false'><img src='/Content/img/details_open.png'/></a>";
                     }
                 },
                 { "aTargets": [1], "mData": "ID", "sTitle": "ID", "sWidth": "20px" },
                 { "aTargets": [2], "mData": "Name", "sTitle": "Name" },
                 { "aTargets": [3], "mData": "Status", "sTitle": "Status" },
                 { "aTargets": [4], "mData": null, "sTitle": "Action", "sWidth": "150px",
                     "fnRender": function (o, val) {
                         return "<a href='/Category/Edit/" + o.aData.ID + "'>Edit</a> | <a href='#'>Delete</a> | <a href='/Product?CategoryId=" + o.aData.ID + "'>Products</a>";
                     }
                 }
            ]
        });
    });

    function expand(o, id) {
        if ($(o).attr("expanded") == "false" || $(o).attr("expanded") == null) {
            $(o).attr("expanded", "true");
            $(o).find("img").attr("src", "/Content/img/details_close.png");
            $(o).parent().parent().after("<tr><td colspan='5'><table id='expand" + id + "'></table></td></tr>");

            $('#expand' + id).dataTable({
                "bProcessing": true,
                "sAjaxSource": '/api/category?parentId='+id,
                "sAjaxDataProp": "",
                "bFilter": false,
                "bLengthChange": false,
                "aoColumnDefs": [
                 { "aTargets": [0], "mData": null, "sTitle": "", "sWidth": "10px",
                     "fnRender": function (o, val) {
                         return "<a href='#' onclick='expand(this," + o.aData.ID + ");return false'><img src='/Content/img/details_open.png'/></a>";
                     }
                 },
                 { "aTargets": [1], "mData": "ID", "sTitle": "ID", "sWidth": "20px" },
                 { "aTargets": [2], "mData": "Name", "sTitle": "Name" },
                 { "aTargets": [3], "mData": "Status", "sTitle": "Status" },
                 { "aTargets": [4], "mData": null, "sTitle": "Action", "sWidth": "100px",
                     "fnRender": function (o, val) {
                         return "<a href='/Category/Edit/" + o.aData.ID + "'>Edit</a> | <a href='#'>Delete</a>";
                     }
                 }
            ]
            });
        } else {
            $(o).attr("expanded", "false");
            $(o).find("img").attr("src", "/Content/img/details_open.png");
            $(o).parent().parent().next().remove();
        }
    }
</script>
<div class="grid_14">
    <a href="/">Home</a> &gt; Category
    <hr />
</div>
<div class="grid_14">
    <div class="box">
        <h2>Product Category<b class="right"><a href="/Category/Edit">Add New Category</a></b></h2>
        <p class="right"></p>
        <table id="dataTable"></table>
        <div class="clear"></div>
    </div>
</div>